<template>
  <view class="u-wrap">
    <view class="u-search-box">
      <swiper />
    </view>
    <view class="shop-info boxShadow">
      <view>
        <image :src="shopInfo.profile_pic" class="shop-image boxShadow" />
      </view>

      <view style="flex: 1">
        <view class="position">
          <view> {{ shopInfo.nickname }}</view>
          <view class="change-shop" @click="changeShop">
            <image
              src="@/static/shop/change-shop.png"
              class="change-shop-img"
            />
            <view> 切换店铺</view>
          </view>
        </view>
        <view class="serve">
          <!-- <image src="@/static/shop/gonggao.png" class="sreve-img" /> -->
          <view style="width: 500rpx"
            ><u-notice-bar
              type="error "
              :duration="2000"
              :autoplay="true"
              :is-circular="true"
              mode="horizontal"
              :list="list"
            ></u-notice-bar>
          </view>
        </view>
      </view>
    </view>

    <view class="u-menu-wrap">
      <scroll-view
        scroll-y
        scroll-with-animation
        class="u-tab-view menu-scroll-view"
        :scroll-top="scrollTop"
        :scroll-into-view="itemId"
      >
        <view
          v-for="(item, index) in tabbar"
          :key="index"
          class="u-tab-item"
          :class="[current == index ? 'u-tab-item-active' : '']"
          @tap.stop="swichMenu(item, index)"
        >
          <!-- <image :src="item.icon" class="slider-image" /> -->
          <text class="u-line-1">{{ item.title }}</text>
        </view>
      </scroll-view>

      <scroll-view
        scroll-y
        scroll-with-animation
        class="right-box"
        @scrolltolower="$u.throttle(scrolltolower, 500)"
      >
        <view class="page-view">
          <!-- 无库存 就提示 不能查看详情  有库存就弹窗 -->
          <view
            @click="
              item.storage == 0 ? $u.toast('该商品暂无库存') : lookDetail(item)
            "
            class="foods-info"
            v-for="(item, index) in catalogGoodsList"
            :id="index"
            :key="index"
          >
            <view class="image-contair">
              <image :src="item.cover" class="image" />
              <!-- 库存==0 展示mask -->
              <view class="mask" v-if="item.storage == 0 ? true : false">
                已售馨</view
              >
            </view>
            <view class="foods-detail">
              <view>
                <view class="foods-title u-line-2">{{ item.title }}</view>
                <view class="foods-stock">库存：{{ item.storage }}</view>
              </view>
              <view class="foods-price-car">
                <view class="foods-price">
                  <view>￥{{ item.price }}</view>
                  <view>￥{{ item.market_price }}</view>
                </view>
                <!-- 库存==0 不展示 -->
                <view
                  v-if="item.storage != 0 && item.items.length == 1"
                  style="position: relative"
                  class="add-car iconfont icon-add-fill"
                  @tap.stop="add($event, item.goods_id, item)"
                >
                  <u-badge
                    size="mini"
                    type="error"
                    :count="item.buyNum"
                    :offset="[-15, -15]"
                  ></u-badge>
                </view>

                <view
                  v-if="item.storage != 0 && item.items.length >= 2"
                  class="choose-kind"
                >
                  <u-badge
                    size="mini"
                    type="error"
                    :count="item.buyNum"
                    :offset="[-15, -15]"
                  ></u-badge>
                  选规格
                </view>
              </view>
            </view>
          </view>
        </view>

        <tui-loadmore
          text="加载中..."
          v-show="loadingShow"
          :index="3"
          type="red"
        ></tui-loadmore>
        <tui-nomore v-show="noMore"></tui-nomore>
      </scroll-view>
    </view>

    <view id="cart" class="car-p" @click="$u.debounce(toCar, 500)">
      <image
        src="@/static/shop/car.png"
        style="width: 125rpx; height: 125rpx"
      />
      <u-badge type="error" :count="carCount" :offset="[-5, -5]"></u-badge>
    </view>

    <!-- 只需要绑定购物车位置即可 -->
    <flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
    <!-- 商品详情 -->
    <foods-detail ref="FoodsDetail"></foods-detail>
    <!-- 商品详情 多规格 -->
    <foods-detail-more ref="FoodsDetailMore"></foods-detail-more>
    <!-- 多规格加入购物车 -->
    <pull-car ref="pullCar"></pull-car>
    <!-- 店铺未营业开启 -->
    <u-mask :show="shopShow">
      <view class="warp">
        <view class="rect" @tap.stop>
          <!-- <image src="https://qiniu.fleayun.cn/loading.gif" class="image" /> -->
        </view>
      </view>
    </u-mask>
  </view>
</template>


<script>
import flyInCart from "@/plugins/flyInCart";
import FoodsDetail from "./component/foodsDetail";
import FoodsDetailMore from "./component/foodsDetailsMore";
import PullCar from "./component/pullCar";
import Swiper from "@/common/components/swiper";
import { jugeIsLogin } from "@/common/utils";
import store from "@/store";
export default {
  components: {
    flyInCart,
    FoodsDetail,
    Swiper,
    FoodsDetailMore,
    PullCar,
  },
  data() {
    return {
      scrollTop: 0, //tab标题的滚动条位置
      oldScrollTop: 0,
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      itemId: "", // 栏目右边scroll-view用于滚动的id
      tabbar: [],
      menuItemPos: [],
      arr: [],
      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
      timer: null, // 定时器

      loadingShow: false, //加载更多数据
      noMore: false, //是否有多个分页

      //购物车位置数据
      cartBasketRect: {},
      //   购物车数量
      carCount: 0,
      shopInfo: {}, //店铺信息
      shopShow: true,
      catalogGoodsList: [], //所选分类商品list
      list: [],
      buy_car: [], //购物车
      page: 1,
      nowCatalogId: "", //当前所选分类
      carMap: null,
    };
  },
  watch: {
    // vuex_car_list: {
    //   handler(newV, oldV) {
    //     this.carCount = 0;
    //     this.carMap = new Map();
    //     this.vuex_car_list.map((v) => {
    //       // 购物车数量
    //       this.carCount += parseInt(v.number);
    //       // 统计每一个spu已经选择的数量
    //       if (this.carMap.has(v.goods_id)) {
    //         this.carMap.set(v.goods_id, this.carMap.get(v.goods_id) + v.number);
    //       } else {
    //         this.carMap.set(v.goods_id, v.number);
    //       }
    //     });
    //     console.log(this.carMap);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  // onUnload() {
  //   this.setCar();
  // },
  onHide() {
    this.setCar();
  },
  onReady() {
    // this.getMenuItemTop();
    const self = this;

    let q = uni.createSelectorQuery();
    setTimeout(function () {
      q.select("#cart")
        .boundingClientRect((data) => {
          console.log(data);
          self.cartBasketRect = data;
        })
        .exec();
    }, 100);
  },
  methods: {
    /**
     * 商品list 滚动到底部
     */
    scrolltolower(e) {
      // 提前判断是否已经是 全部数据
      if (this.noMore) {
        this.loadingShow = false;
        return;
      } else {
        this.loadingShow = true;
      }
      this.page += 1;
      var form = {
        category_id: this.nowCatalogId,
        page: this.page,
        merchant_id: this.shopInfo.id,
      };
      this.$u.api.goodsListApi(form).then((res) => {
        // 给商品添加一个购买数量
        res.list.map((v) => {
          if (this.carMap.has(v.goods_id)) {
            v.buyNum = this.carMap.get(v.goods_id);
          } else {
            v.buyNum = 0;
          }
        });
        this.catalogGoodsList.push(...res.list);
        // 商品list === 0 且 is_all == 1 不展示nomore
        if (res.list.length === 0 && res.is_all === true) {
          this.noMore = true;
        } else if (res.is_all === false && res.list.length > 0) {
          this.noMore = false;
        } else if (res.list.length === 0 && res.is_all === true) {
          this.loadingShow = false;
        }
      });
    },

    /**
     * 添加购物车
     */
    add(e, id, item) {
      // 判断是否登陆 未登录就跳转到个人中心
      if (!jugeIsLogin()) {
        return;
      }
      // 判断 多规格还是 一个规格
      // 一个规格直接加入购物车
      // 多规格 需要弹窗 选择
      if (item.items.length > 1) {
        this.moreKindGoods(item);
      } else {
        this.jugeCarHadThisGoods(e, id, item);
      }
    },

    /**
     * 多规格商品 添加
     */
    moreKindGoods(item) {
      this.$refs.pullCar.goodsInfo = [];
      // 给给个items 添加一个选择数量  默认为0
      item.items.map((v, index) => {
        this.$refs.pullCar.goodsInfo.push({
          merchant_id: this.shopInfo.id,
          goods_id: item.goods_id,
          goods_item_id: v.goods_item_id,
          number: 0,
        });
        // 这里看看是否购物车已经有数据了
        this.buy_car.map((v1) => {
          // 如果购物车 有数据
          if (v.goods_item_id === v1.goods_item_id) {
            // 存 已经有的数量
            this.$refs.pullCar.goodsInfo[index].number = v1.number;
          }
        });
      });
      this.$refs.pullCar.goodsList = item.items;
      this.$refs.pullCar.show = true;
    },
    /**
     * 判断购物车 是否存在 该商品了
     */
    jugeCarHadThisGoods(e, id, item) {
      // console.log(item);
      var isExist = false;
      var goods_item_id = item.items[0].goods_item_id;
      var storage = item.items[0].storage;
      // 看看购物车是否有这个商品
      this.buy_car.forEach((v) => {
        if (v.goods_item_id === goods_item_id) {
          isExist = true;
          // 判断库存是否 超出库存
          if (v.number >= storage) {
            this.$u.toast("超出库存");
          } else {
            // 如果有的话直接 数量加一
            v.number += 1;
            this.$refs.inCart.addToCart(e, id);
            // 购物车数量+1
            this.carCount += 1;
            // 购买数量
            item.buyNum += 1;
          }
        }
      });
      // 如果没有 添加该商品到购物车
      if (!isExist) {
        var form = {
          merchant_id: this.shopInfo.id,
          goods_id: item.goods_id,
          goods_item_id: item.items[0].goods_item_id,
          number: 1,
          goods_title: item.title,
          item_pic: item.cover,
          market_price: item.items[0].market_price,
          price: item.items[0].origin_price,
          storage: item.items[0].storage,
          item_title: item.items[0].title,
        };
        this.buy_car.push(form);
        // 购物车数量+1
        this.carCount += 1;
        // 购买数量
        item.buyNum += 1;
        this.$refs.inCart.addToCart(e, id);
      }
      this.$u.vuex("vuex_car_list", this.buy_car);
    },

    // 点击左边的栏目切换
    async swichMenu(item, index) {
      this.loadingShow = false; //加载更多数据
      this.noMore = false; //是否有多个分页
      this.page = 1;
      // 当前分类id
      this.nowCatalogId = item.id;

      this.getGoodsList(this.shopInfo.id, item.id, 1);
      // if (this.arr.length == 0) {
      //   await this.getMenuItemTop();
      // }
      if (index == this.current) return;
      this.scrollRightTop = this.oldScrollTop;
      this.$nextTick(function () {
        this.scrollRightTop = this.arr[index];
        this.current = index;
        this.leftMenuStatus(index);
      });
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select("." + elClass)
          .fields(
            {
              size: true,
            },
            (res) => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              this[dataVal] = res.height;
              resolve();
            }
          )
          .exec();
      });
    },
    // 观测元素相交状态
    async observer() {
      this.tabbar.map((val, index) => {
        let observer = uni.createIntersectionObserver(this);
        // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
        // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
        observer
          .relativeTo(".right-box", {
            top: 0,
          })
          .observe("#item" + index, (res) => {
            if (res.intersectionRatio > 0) {
              let id = res.id.substring(4);
              this.leftMenuStatus(id);
            }
          });
      });
    },
    // 设置左边菜单的滚动状态
    async leftMenuStatus(index) {
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect("menu-scroll-view", "menuHeight");
        await this.getElRect("u-tab-item", "menuItemHeight");
      }
      // 将菜单活动item垂直居中
      this.scrollTop =
        index * this.menuItemHeight +
        this.menuItemHeight / 2 -
        this.menuHeight / 2;
    },
    /**
     * 更换店铺
     */
    changeShop() {
      uni.switchTab({
        url: "/pages/changeShop/changeShop",
      });
    },

    /**
     * 去购物车
     */
    toCar() {
      console.log(this.buy_car);
      var from = {
        merchant_id: this.shopInfo.id,
        goods_list: this.buy_car,
      };
      if (this.buy_car.length > 0) {
        this.$u.api
          .setCarApi(from)
          .then((res) => {
            uni.navigateTo({
              url: "/pages/shop/component/car?merchant_id=" + this.shopInfo.id,
            });
          })
          .catch((error) => {
            this.$u.toast(error.message);
          });
      } else {
        this.$u.toast("购物车空空如也..");
      }
    },
    /**
     * 设置购物车
     */
    setCar() {
      var from = {
        merchant_id: this.shopInfo.id,
        goods_list: this.buy_car,
      };
      if (this.buy_car.length > 0) {
        this.$u.api
          .setCarApi(from)
          .then((res) => {
            // this.$u.vuex("vuex_car_list", []);
          })
          .catch((error) => {
            this.$u.toast(error.message);
          });
      }
    },
    /**
     * 获取店铺分类 及商品列表
     */
    getCatalog(shopId) {
      return new Promise((resolve) => {
        var from = {
          merchant_id: shopId,
        };
        this.$u.api.categoryApi(from).then((res) => {
          this.tabbar = res;
          this.nowCatalogId = res[0].id;
          resolve();
        });
      });
    },
    /**
     * 获取商品list
     */
    getGoodsList(merchant_id, category_id, page) {
      uni.showLoading({
        title: "商品加载中",
      });
      var form = {
        merchant_id: merchant_id,
        category_id: category_id,
        page: page,
      };
      this.$u.api.goodsListApi(form).then((res) => {
        this.catalogGoodsList = res.list;
        this.carMap == null ? (this.carMap = new Map()) : this.carMap;
        this.catalogGoodsList.map((v) => {
          if (this.carMap.has(v.goods_id)) {
            v.buyNum = this.carMap.get(v.goods_id);
          } else {
            v.buyNum = 0;
          }
        });
        // 商品list === 0 且 is_all == 1 不展示nomore
        if (res.list.length != 0 && res.is_all === true) {
          this.noMore = true;
        } else if (res.is_all === false && res.list.length > 0) {
          this.noMore = false;
        }
        uni.hideLoading();
      });
    },
    /**
     * 查看商品详情
     */
    lookDetail(item) {
      uni.showLoading({
        title: "加载中",
      });
      var form = {
        goods_id: item.goods_id,
        merchant_id: this.shopInfo.id,
      };
      this.$u.route({
        url: "/pages/shop/new-details/new-details",
        params: form,
      });
      // this.$u.api
      //   .goodsDetailAapi(form)
      //   .then((res) => {
      //     // 判断是否有多规格
      //     if (res.items.length > 1) {
      //       this.$refs.FoodsDetailMore.show = true;

      //       this.$refs.FoodsDetailMore.goodsList = [];
      //       this.$refs.FoodsDetailMore.goodsKindInfo = res;
      //       this.$refs.FoodsDetailMore.goodsInfo = [];
      //       // 购物车item_id 列表
      //       var item_id_list = [];
      //       this.buy_car.map((v) => {
      //         item_id_list.push(v.goods_item_id);
      //       });
      //       // console.log(item_id_list);

      //       //判断 该商品规格 是否存在购物车 获取数量
      //       res.items.map((v, index) => {
      //         if (item_id_list.includes(v.goods_item_id)) {
      //           //存在
      //           var form = {
      //             number: 0,
      //             goods_id: v.goods_id,
      //             goods_item_id: v.goods_item_id,
      //             merchant_id: this.shopInfo.id,
      //           };
      //           this.buy_car.forEach((element) => {
      //             if (element.goods_item_id === v.goods_item_id) {
      //               form.number = element.number;
      //               this.$refs.FoodsDetailMore.goodsInfo.push(form);
      //             }
      //           });
      //         } else {
      //           var form = {
      //             number: 0,
      //             goods_id: v.goods_id,
      //             goods_item_id: v.goods_item_id,
      //             merchant_id: this.shopInfo.id,
      //           };
      //           this.$refs.FoodsDetailMore.goodsInfo.push(form);
      //         }
      //       });
      //       // 轮播图
      //       res.banners.map((v) => {
      //         this.$refs.FoodsDetailMore.goodsList.push({
      //           image: v,
      //         });
      //       });
      //       uni.hideLoading();
      //     } else {
      //       this.$refs.FoodsDetail.show = true;
      //       this.$refs.FoodsDetail.goodsList = [];
      //       // 商品信息
      //       this.$refs.FoodsDetail.goodsKindInfo = res;

      //       // 该商品规格信息
      //       var goods_id = res.items[0].goods_id;
      //       var goods_item_id = res.items[0].goods_item_id;

      //       //该规格商品信息
      //       this.$refs.FoodsDetail.goodsInfo.goods_id = res.goods_id;
      //       this.$refs.FoodsDetail.goodsInfo.goods_item_id =
      //         res.items[0].goods_item_id;
      //       this.$refs.FoodsDetail.goodsInfo.merchant_id = this.shopInfo.id;

      //       // goods_item_id  列表
      //       var item_id_list = [];
      //       // 此时购物车 该商品规格添加的数量
      //       // 该商品已经存在购物车时候  数量 == 选中的
      //       this.buy_car.forEach((v) => {
      //         item_id_list.push(v.goods_item_id);
      //         if (v.goods_item_id === goods_item_id) {
      //           // 赋予商品id  sku_id 以及数量
      //           this.$refs.FoodsDetail.goodsInfo.number = v.number;
      //         }
      //       });
      //       // 如果不在
      //       if (!item_id_list.includes(goods_item_id)) {
      //         this.$refs.FoodsDetail.goodsInfo.number = 0;
      //       }

      //       // 轮播图
      //       res.banners.map((v) => {
      //         this.$refs.FoodsDetail.goodsList.push({
      //           image: v,
      //         });
      //       });
      //     }
      //   })
      //   .catch((error) => {
      //     this.$u.toast("获取失败,请重试");
      //   });
    },
    handleOnload(ShopInfo) {
      store.state.merchant_info = ShopInfo;
      //console.log(ShopInfo);
      this.shopInfo = ShopInfo;
      // 第一个分类
      this.nowCatalogId = ShopInfo.id;
      // 公告
      if (ShopInfo.hasOwnProperty("announcement")) {
        this.list.push(ShopInfo.announcement);
      }
      this.getCatalog(ShopInfo.id).then(() => {
        return this.getGoodsList(ShopInfo.id, this.tabbar[0].id, 1);
      });
      ShopInfo.open_status == 1
        ? (this.shopShow = false)
        : (this.shopShow = true);
    },
    /**
     * 获取店铺信息
     */
    getMerchantInfo(merchantId) {
      return new Promise((resolve) => {
        var from = {
          id: merchantId,
        };
        this.$u.api.merchantInfoApi(from).then((res) => {
          // ShopInfo= res.data
          //console.log(res)
          resolve(res);
        });
      });
    },
    /**
     * 处理购物车
     */
    detailCar() {
      this.buy_car = [];

      this.$u.api
        .getCarDataApi({ merchant_id: this.shopInfo.id })
        .then((res) => {
          if (res.length != 0) {
            this.buy_car = res.list;
            this.$u.vuex("vuex_car_list", res.list);
            this.carMap = new Map();
            this.carCount = 0;

            res.list.map((v) => {
              v.merchant_id = this.shopInfo.id;
              this.carCount += parseInt(v.number);
              // 统计每一个spu已经选择的数量
              if (this.carMap.has(v.goods_id)) {
                this.carMap.set(
                  v.goods_id,
                  this.carMap.get(v.goods_id) + v.number
                );
              } else {
                this.carMap.set(v.goods_id, v.number);
              }
            });
            console.log(this.carMap);
            // 给商品添加一个购买数量
            this.catalogGoodsList.map((v) => {
              if (this.carMap.has(v.goods_id)) {
                v.buyNum = this.carMap.get(v.goods_id);
              } else {
                v.buyNum = 0;
              }
            });
          }
        });
    },
  },
  onShareAppMessage(res) {
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
    }
    return {
      title: this.shopInfo.nickname,
      path:
        "/pages/shop/shop?nickname=" +
        this.shopInfo.nickname +
        "&id=" +
        this.shopInfo.id +
        "&profile_pic=" +
        this.shopInfo.profile_pic +
        "&announcement=" +
        this.shopInfo.announcement +
        "&open_status=" +
        this.shopInfo.open_status,
    };
  },

  onLoad(ShopInfo) {
    const sceneMerchantId = decodeURIComponent(ShopInfo.scene);
    //如果是扫码进入，获取商户信息
    if (sceneMerchantId != "undefined") {
      this.getMerchantInfo(sceneMerchantId).then((res) => {
        return this.handleOnload(res);
      });
    } else {
      this.handleOnload(ShopInfo);
    }
    // 获取 商品信息
    this.getCatalog(this.shopInfo.id).then(() => {
      this.current = 0;
      return this.getGoodsList(this.shopInfo.id, this.tabbar[0].id, 1);
    });
  },
  onShow() {
    if (!this.shopInfo.id) {
      return;
    }
    this.detailCar();
  },
};
</script>

<style lang="scss" scoped>
.choose-kind {
  padding: 2rpx 15rpx;
  background-color: #c46036;
  color: #ffffff;
  font-size: 20rpx;
  border-radius: 20rpx;
  position: relative;
}
.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.rect {
  width: 120px;
  height: 120px;
  color: white;
  text-align: center;
  border-radius: 50%;
  .image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  width: 150rpx;
  /* #endif */
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  padding: 18rpx 20rpx 0 18rpx;
  .shop-info {
    background-color: #ffffff;
    margin: 10rpx 0;
    border-radius: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 30rpx;
    & > view:nth-child(1) {
      width: 120rpx;
      height: 120rpx;
      text-align: center;
      border-radius: 20rpx;
      line-height: 60px;
      .shop-image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
        vertical-align: middle;
      }
    }

    & > view:nth-child(2) {
      margin-left: 20rpx;
      flex: 1;
      .position {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        color: #333333;
        font-size: 32rpx;
        font-weight: bold;
        .change-shop {
          width: 200rpx;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
          color: #d65c45;
          font-size: 28rpx;
          .change-shop-img {
            width: 34rpx;
            height: 34rpx;
            margin-right: 10rpx;
          }
        }
      }
      .serve {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        color: #666666;
        font-size: 28rpx;
        .sreve-img {
          width: 26rpx;
          height: 26rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
  margin-top: 20rpx;
}

.u-search-inner {
  background-color: rgb(234, 234, 234);
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
}

.u-search-text {
  font-size: 26rpx;
  color: $u-tips-color;
  margin-left: 10rpx;
}

.u-tab-view {
  width: 250rpx;
  height: 100%;
  background: #ffffff;

  & > view:nth-child(1) {
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
  }
}

.u-tab-item {
  height: 100rpx;
  background: #ffffff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 26rpx;
  color: #5c6166;
  font-weight: 400;
  line-height: 1;

  .slider-image {
    width: 30rpx;
    height: 35rpx;
    margin-bottom: 10rpx;
  }
}

.u-tab-item-active {
  position: relative;
  color: #12202e;
  font-weight: 600;
  background: #e6e6e6;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
}

// .u-tab-item-active::before {
//   content: "";
//   position: absolute;
//   border-left: 4px solid #d65c45;
//   height: 80%;
//   left: 0;
//   color: #d65c45;
//   border-radius: 3rpx;
//   // top: 39rpx;
// }

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.page-view {
  padding: 0 0 16rpx 16rpx;
}

// .class-item {
//   margin-bottom: 30rpx;
//   background-color: #fff;
//   padding: 16rpx;
//   border-radius: 8rpx;
//   & > view:last-child {
//     border-bottom: none;
//   }
.foods-info {
  // height: 200rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  border-bottom: 0.5rpx solid #e6e6e6;
  .image-contair {
    width: 50 * 3rpx;
    height: 50 * 3rpx;
    position: relative;
    display: inline-block;
    .image {
      width: 50 * 3rpx;
      height: 50 * 3rpx;
      // margin-top: 16rpx;
      // margin-right: 10rpx;
    }
    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #000;
      border-radius: 10rpx;
      opacity: 0.5;
      top: 0;
      color: #ffffff;
      text-align: center;
      line-height: 150rpx;
    }
  }

  .foods-detail {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20rpx;

    //   background-color: red;

    .foods-price-car {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .add-car {
        color: #d65c45;
        font-size: 48rpx;
      }
      .foods-price {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        & > view:nth-child(1) {
          font-size: 28rpx;
          color: #d65c45;
          margin-right: 10rpx;
        }
        & > view:nth-child(2) {
          font-size: 28rpx;
          color: #999999;
          text-decoration: line-through;
        }
      }
    }
    .foods-title {
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;
    }
    .foods-stock {
      margin: 10rpx 0;
      color: #333333;
    }
  }
}
// }
.car-p {
  position: absolute;
  bottom: 50px;
  right: 10px;
  font-size: 85rpx;
  z-index: 200;
  color: #d65c45;
}
.class-item:last-child {
  min-height: 100vh;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 24rpx;
  color: $u-main-color;
}

.item-container {
  display: flex;
  flex-wrap: wrap;
}

.thumb-box {
  width: 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20rpx;
}

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}
</style>
